<template>
	<div class="page-wrap">
		<div class="search-box">
		  <a-form layout="vertical" style="display:flex;">
			
			<a-form-item style="display:none" label="管理类型">
			   <a-select
				allow-clear="true"
				 v-model:value="formparams.assetType"
				 style="width:200px"
				placeholder="管理类型"
			   >
				 <a-select-option :value="1">电子设备</a-select-option>
				 <a-select-option :value="2">科研和技术服务用仪器设备</a-select-option>
				 <a-select-option :value="3">家具用具</a-select-option>
			   </a-select>
			  </a-form-item>
			  
			<!-- <a-form-item label="文章标题" style="margin-right:8px">
				<a-input   placeholder="文章标题"   style="width:200px" v-model:value="formparams.year" picker="year" />
			</a-form-item>
			<a-form-item label="文章类型" style="margin-right:8px">
			   <a-select
				allow-clear="true"
				 v-model:value="formparams.assetType"
				 style="width:200px"
				placeholder="文章类型"
			   >
				 <a-select-option :value="1">电子设备</a-select-option>
				 <a-select-option :value="2">科研和技术服务用仪器设备</a-select-option>
				 <a-select-option :value="3">家具用具</a-select-option>
			   </a-select>
			  </a-form-item>
			   <a-form-item class="no-content-label" label=".">
			       <a-button @click="getTreeData" type="primary" html-type="submit">查询</a-button>
			     </a-form-item> -->
			 
		  </a-form>
		  
		  <a-button style="top:-0px;margin-bottom:5px" class="add-right" type="primary" html-type="submit" @click="addNew()">新增</a-button>
		</div>
		
		<div class="page-main" >
			<!-- <div class="page-left">
			
				 <a-tree
				 v-if="treeData.length"
				    v-model:selectedKeys="selectedKeys"
				    autoExpandParent
					defaultExpandAll
				    :tree-data="treeData"
					:fieldNames="{title:'categoryName', key: 'categoryCode'}"
				   
				  >
				    
				  </a-tree>
			</div> -->
			
			<div class="page-right" id="pagemin">
				<a-table
				:scroll="{ y: yheight }"
				rowKey="categoryCode"
				:row-selection="rowSelection"
				  :columns="columns"
					:pagination="false"
				  :data-source="treeData"
				>
					<template #emptyText>
						<div class="table-no-data-wrap" style="margin:70px 0">
							 <img src="../../assets/metadata.png" />
							 <div style="color:#333;font-size:16px">暂无记录</div>
							 <div style="color: rgba(37,43,70,0.5);">需等待内容更新方可查看</div>
						</div>
						
					</template>
				 <template #bodyCell="{ column,record,index }">
					 
					<template v-if="column.dataIndex == 'index'">
					  {{(index+1)}}
					 
					</template>
					
					
					
					
					
					<template v-if="column.dataIndex == 'type'">
						<span v-show="record.type==1" >文章列表</span>
						<span v-show="record.type==2" >图片</span>
						<span v-show="record.type==3" >文章</span>
						<span v-show="record.type==4" >不可点击</span>
					</template>
					
					  
					   
				      <template v-if="column.dataIndex == 'action'">
				       <div class="operation-wrap" >
				       		 		
							<div class="table-edit-btn" style="margin-right:6px"  @click="addNew(record)">
								编辑
							</div> 
							<div @click="delClick(record)" class="table-del-btn">
								删除
							</div> 
				       		 			
				        </div>
				      </template>
				    </template>
				</a-table>
				
				
				
			</div>
		</div>
	</div>
	
	
	
	<a-modal
	width="640px"
	  :footer="null"
		:destroyOnClose="true"
		v-model:visible="visible"
		:title="logtitle"
		@ok="handleOk"
	> 
	  
	<a-form
		
	  :model="addForm"
	  ref="formRef"
		layout="vertical"
	  name="addForm"
	 
	  autocomplete="off"
	  >
		
			<a-row justify="space-between" style="margin-bottom:12px">
				<a-col :span="11">
					<a-form-item
					:colon="true"
					  label="分类名称"
					  name="categoryName"
					  :rules="[{ required: true, message: '分类名称' }]"
					>
					  <a-input  placeholder="分类名称" v-model:value="addForm.categoryName" />
					</a-form-item>
				</a-col>
				<a-col :span="11">
					<a-form-item
					:colon="true"
					  label="所属分类"
					 
					>
					  <a-tree-select
					      v-model:value="addForm.parent"
					      show-search
					      style="width: 100%"
					      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
					      placeholder="所属分类"
					      allow-clear
						  :labelInValue="true"
						  :fieldNames="{label:'categoryName', value: 'categoryCode'}"
					      tree-default-expand-all
					      :tree-data="treeData"
					      tree-node-filter-prop="label"
					    >
					     
					    </a-tree-select>
					</a-form-item>
				</a-col>
				<a-col :span="11">
					<a-form-item
					  label="类型"
					  name="type"
					  :rules="[{ required: true, message: '类型' }]"
					>
						<a-select
							:options="typeList"
							style="width:100%"
							
							placeholder="类型"  v-model:value="addForm.type">
												
						</a-select>
						
						
						
					 
					</a-form-item>
				</a-col>
				<a-col :span="11" v-if="addForm.type==5">
					<a-form-item
					  label="网址"
					  name="url"
					  :rules="[{ required: true, message: '网址' }]"
					>
						<a-input  placeholder="网址" v-model:value="addForm.url" />
						
						
						
					 
					</a-form-item>
				</a-col>
				<a-col :span="11">
					<a-form-item style="width:100%" :rules="[{ required: true, message: '排序' }]"  label="排序" name="sort">
					    <a-input-number placeholder="排序" style="width:100%" v-model:value="addForm.sort" />
					</a-form-item>
				</a-col>
				
					
			</a-row>
			
			
			
			
	  </a-form>
	
	
	
	
	
	<a-row justify="center" class="reset-dialog-footer" >
		<div class="submit-btn" @click="sureAdd">
			提交
		</div>
	</a-row>
	 
	</a-modal>
	
	
	
	
	
</template>

<script>
	function deleteNoChildren(arr){
		for(let i=0;i<arr.length;i++){
			if(arr[i].children&&arr[i].children==0){
				delete arr[i].children
			}
			if(arr[i].children&&arr[i].children.length){
				deleteNoChildren(arr[i].children)
			}
			if(!arr[i].children){
				delete arr[i].children
			}
		}
		return arr
	}
	let typeList=[{
		label:'文章列表',
		value:'1'
	},{
		label:'图片',
		value:'2'
	},{
		label:'文章',
		value:'3'
	},{
		label:'不可点击',
		value:'4'
	},{
		label:'链接',
		value:'5'
	}]
	const columns= [
		// {
		// 			title: "序号",
		// 			width: 60,
		// 			align:'center',
		// 			dataIndex: 'index'
		// 		  },
				{
				  title: '所属栏目',
				 
				  dataIndex: 'categoryName'
				},
		 
		{
		  title: '排序',
		  dataIndex: 'sort',
		  
		},
		 {
		   title: '类型',
		   dataIndex: 'type',
		   
		 },
		
		
	  {
	    title: '操作',
	    dataIndex: 'action',
	  	width:'140px'
	  }
	 
	];
	
	import {
		slxhapisystemcategorydelCategory,
		slxhapisystemcategorygetArticleTreeList,
		slxhapisystemcategoryaddOrEditArticleCategory
		} from '../../../api/manpart.js'
	import {defineComponent,onMounted,ref,reactive,watch, nextTick } from 'vue'
	import {useRouter} from 'vue-router'
	import dayjs from 'dayjs'
	import { Modal } from 'ant-design-vue';
	export default defineComponent({
		
		
		setup() {
			let yheight=ref(400)
			let formRef=ref()
			let logtitle=ref('新增网站模块')
			let tableData=ref([])
			let addForm=reactive({
				 "categoryCode": "",
				  "categoryName": "",
				  url:'',
				  "parent": {
					  
				  },
				 
				  "type": null
			})
			let treeData=ref([])
			let visible=ref(false)   
			const expandedKeys = ref([]);
			    const selectedKeys = ref([]);
			    const checkedKeys = ref([]);
			    watch(expandedKeys, () => {
			      console.log('expandedKeys', expandedKeys);
			    });
			    watch(selectedKeys, () => {
			      console.log('selectedKeys', selectedKeys);
			    });
			    watch(checkedKeys, () => {
			      console.log('checkedKeys', checkedKeys);
			    });
			    const handleExpand = (keys, {
			      expanded,
			      node,
			    }) => {
			      
			      const tempKeys = ((node.parent ? node.parent.children : treeData) || []).map(({
			        key,
			      }) => key);
					expandedKeys.value = keys;
			    };
			
			let formparams=reactive({})
			onMounted(()=>{
			
				getTreeData()
				
			})
			const getheighttable=()=>{
				let pagemin=document.getElementById('pagemin')
				console.log(pagemin.clientHeight)
				yheight.value=pagemin.offsetHeight-50
			}
			const getTreeData=()=>{
				slxhapisystemcategorygetArticleTreeList({}).then(e=>{
					
					treeData.value=deleteNoChildren(e.object)
					
					nextTick(()=>{
						getheighttable()
					})
					
				}).catch(err=>{
					console.log(err)
				})
			}
			const addNew=record=>{
				for(let key in record){
					addForm[key]=record[key]
					if(record.pcode){
						addForm.parent={
							label:record.pname,
							value:record.pcode
						}
					}else{
						addForm.parent={
							
						}
					}
					
					
				}
				logtitle.value=!record?'新增网站模块':'编辑网站模块'
				visible.value=true
			}
			
			
			
			const sureAdd=()=>{
				formRef.value
				.validate()
				.then(() => {
					console.log(addForm)
					let transData=JSON.parse(JSON.stringify(addForm))
					if(addForm.parent){
						transData.pcode=addForm.parent.value
						transData.pname=addForm.parent.label
					}else{
						transData.pcode=''
						transData.pname=''
					}
					
					
					slxhapisystemcategoryaddOrEditArticleCategory(transData).then(e=>{
						getTreeData()
						console.log(e)
						if(e.code==1){
							for(let key in addForm){
								if(key=='parent'){
									addForm[key]={}
								}else{
									addForm[key]=null
								}
								
							}
							
							
							visible.value=false
							
							globalVar.Message.success('操作成功')
						}else{
							globalVar.Message.warning(e.message)
						}
					}).catch(err=>{
						console.log(err)
					})
				})
				.catch((error) => {
				  console.log("error", error);
				});
				
			}
			
			
			const delClick=record=>{
				 Modal.confirm({
				        title: '确定删除?',
				        content: '',
				        okText: '确定',
				        okType: 'danger',
				        cancelText: '取消',
				        onOk() {
				          slxhapisystemcategorydelCategory({categoryCode:record.categoryCode}).then(e=>{
				          	
				          	getTreeData()
				          	
				          }).catch(err=>{
				          	console.log(err)
				          })
				        },
				        onCancel() {
				          console.log('Cancel');
				        },
				      });
			}
			
			return{
				yheight,
				getTreeData,
				delClick,
				formRef,
				sureAdd,
				typeList,
				logtitle,
				addForm,
				addNew,
				visible,
				tableData,
				treeData,
				columns,
				expandedKeys,
				selectedKeys,
				checkedKeys,
				handleExpand,
				formparams
				
			}
		}
	})
	
</script>

<style scoped>
	.page-wrap{
		height:100%;
	}
	.page-main{
		height:calc( 100% - 36px);
		overflow: hidden;
		display:flex;
		padding-right:60px;
	}
	.page-right{
		height:100%;
		overflow: auto;
		flex:1;
	}
	.page-left{
		height:100%;
		overflow: auto;
	}
	.page-left{
		width:200px;
	}
	.page-main{
		display:flex;
		padding-right:60px;
	}
	.page-right{
		flex:1;
		
	}
</style>